<template>
    <section id="entrusting_renting2">
        <title-go-back :title="title"></title-go-back>
        <div class="entrusting_renting2_content">
            <p class="title">补充内容<span>(选填)</span></p>
            <textarea name="" id="" cols="30" rows="8" placeholder="请填写房屋配置、出租要求等信息，详细信息会让您更快出租哟~"></textarea>
            <ul class="imgList">
                <li :class="{isDel: delId === item}" v-for="item in 5" :key="item">
                    <img src="https://s1.ax1x.com/2018/09/27/iMLT4s.png" alt="">
                    <i class="iconfont icon-shanchu"></i>
                </li>
                <li>
                    <img src="../../assets/image/addImg.jpg" alt="添加图片">
                    <input @change="selcetImg" type="file" name="pic" id="pic" accept="image/*" />
                 </li>
            </ul>
        </div>
        <!-- 房屋配置 -->
        <div class="configure">
            <p class="title">补充内容<span>(选填)</span></p>
            <ul class="configure_list">
                <li @click="select(item.id)" :class="{active: listIds.includes(item.id)}" v-for="item in list" :key="item.id">
                    <img v-if="listIds.includes(item.id)" :src="item.asrc" :alt="item.name">
                    <img v-else :src="item.src" :alt="item.name">
                    <p>{{item.name}}</p>
                </li>
            </ul>
        </div>
        <div class="submitBtn">
            <button>确定委托</button>
        </div>
    </section>
</template>
<script>
import TitleGoBack from "../../components/common/TitleGoBack";
import { EntrustingRentingList } from "../../assets/js/tabbar.js";
export default {
  components: {
    TitleGoBack
  },
  data() {
    return {
      title: "房屋委托",
      delId: 1,
      listIds: [],
      list: EntrustingRentingList
    };
  },
  methods: {
    //   上传图片
    selcetImg: function(e) {
      let that = this;
      let file = e.target.files[0];
      let param = new FormData(); //创建form对象
      param.append("files", file, file.name); //通过append向form对象添加数据
      // param.append('chunk','0');//添加form表单中其他数据
      let config = {
        headers: { "Content-Type": "multipart/form-data" }
      }; //添加请求头
    //   axios
    //     .post(
    //       that.$root.urlPath.MJK +
    //         "/members/uploadImage?memberid=" +
    //         localStorage.getItem("memberid"),
    //       param,
    //       config
    //     )
    //     .then(response => {
    //       console.log(response.data);
    //     });
    },
    
    //   选择房屋配置
    select(e) {
      if (this.listIds.includes(e)) {
        let listIds = this.listIds;
        let index = listIds.indexOf(e);
        listIds.splice(index, 1);
        this.listIds = listIds;
      } else {
        this.listIds = [...this.listIds, e];
      }
    }
  }
};
</script>
<style scoped>
#entrusting_renting2 {
  background: #f8f8f8;
  min-height: 100vh;
}
.entrusting_renting2_content {
  background: #fff;
  padding: 15px 10px;
  border-bottom: 1px solid #eee;
}
.title {
  margin: 0;
  color: #333333;
}
.title span {
  margin-left: 8px;
  color: #999;
  font-size: 14px;
}
.entrusting_renting2_content textarea {
  box-sizing: border-box;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  resize: none;
  border: none;
}
.imgList {
  list-style: none;
  margin: 0;
  padding: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
}
.imgList li {
  width: calc((100vw - 60px) / 5);
  height: calc((100vw - 60px) / 5);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
.imgList li:nth-child(5n) {
  margin-right: 0;
}
.imgList li img {
  width: calc((100vw - 60px) / 5);
  height: calc((100vw - 60px) / 5);
}
#pic {
  position: absolute;
  top: 0;
  left: 0;
  width: calc((100vw - 60px) / 5);
  height: calc((100vw - 60px) / 5);
  opacity: 0;
}
.imgList li i {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  font-size: 2rem;
  line-height: calc((100vw - 60px) / 5);
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
}
.imgList li.isDel i {
  display: block;
}
.configure {
  background: #fff;
  margin-top: 10px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 15px 10px 0;
}
.configure_list {
  list-style: none;
  margin: 0;
  padding: 23px 0 0;
  display: flex;
  flex-wrap: wrap;
}
.configure_list li {
  width: 20%;
  margin-bottom: 23px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.configure_list li.active p {
  color: #ea4549;
}
.configure_list li img {
  width: 20px;
}
.configure_list li p {
  font-size: 12px;
  color: #999;
}
.submitBtn {
  padding: 38px 10px 43px;
}
.submitBtn button {
  width: 100%;
  height: 50px;
  background: #e6191e;
  color: #fff;
  border: none;
  box-shadow: 0;
}
</style>
